<template>
	<view class="work-container">
		<view class="bigImg" style="width: 90%;text-align: center;">
			<image-view
				v-if="list.targetFieldMapping.panoramaNonVehicleUrl && list.targetFieldMapping.panoramaNonVehicleUrl.indexOf('http') > -1"
				style="width: 100%;" :src="list.targetFieldMapping.panoramaNonVehicleUrl" :big='true'
				:qj="list.targetFieldMapping.panoramaNonVehicleUrl"></image-view>
			<image-view
				v-if="list.targetFieldMapping.panoramaNonVehicleUrl && !(list.targetFieldMapping.panoramaNonVehicleUrl.indexOf('http') > -1)"
				style="width: 100%;" :src="list.targetFieldMapping.panoramaNonVehicleUrl" :big='true'
				:qj="list.targetFieldMapping.panoramaNonVehicleUrl"></image-view>
			<view>{{ $t('search:panorama') }}</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;">
			<view class="bigImg" style="text-align: center;width: auto;margin: 20px;position: relative;">
				<view class="details-icon-search" v-if='list.targetFieldMapping.captureNonVehicleUrl'
					@click="searchAgain(list.targetFieldMapping.captureNonVehicleUrl)"></view>
				<image-view
					v-if="list.targetFieldMapping.captureNonVehicleUrl && list.targetFieldMapping.captureNonVehicleUrl.indexOf('http') > -1"
					:src="list.targetFieldMapping.captureNonVehicleUrl" style="width: 100%;height: 100%"></image-view>
				<image-view
					v-if="list.targetFieldMapping.captureNonVehicleUrl && !(list.targetFieldMapping.captureNonVehicleUrl.indexOf('http') > -1)"
					:src="list.targetFieldMapping.captureNonVehicleUrl" style="width: 100%;height: 100%"></image-view>
				<view>{{ $t('search:snapshot') }}</view>
			</view>
		</view>

		<view class="Nav">
			<view :class="index == 1 ? 'typeCarS' : 'typeCar'" @click="NavClick(1)">
				{{ $t('search:basicAttributes') }}
			</view>
		</view>
		<ul class="ul" v-if="index == 1">
			<li class="li">
				<view class="title">{{ $t('search:targetType') }}</view>
				<view class="tit">
					{{ $t('search:tricycle') }}
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureTime') }}</view>
				<view class="tit">{{ captureTime }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureDevice') }}</view>
				<view class="tit">{{ list.targetFieldMapping.deviceName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:vehicleColor') }}</view>
				<view class="tit">{{ nonVehicleColor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:umbrellaHolding') }}</view>
				<view class="tit">{{ nonVehicleCycleCover }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:passenger') }}</view>
				<view class="tit">{{ nonVehicleManned }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:lightShape') }}</view>
				<view class="tit">{{ $t('search:unknown') }}</view>
			</li>
		</ul>
	</view>
</template>

<script>
import { getsSearchCarS } from '@/api/cljs.js'
export default {
	data() {
		return {
			index: 1,
			// imgUrl: "/fileApi/",
			list: {
				targetFieldMapping: {}
			},
			form: {}
		}
	},
	computed: {
		captureTime() {
			const num = this.list.targetFieldMapping?.captureTime
			if (num == '' || num == null) {
				return this.$t('search:none')
			} else {
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		nonVehicleColor() {
			const str = this.list.targetFieldMapping.nonVehicleColor,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:unknownUnrecognized'),
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"3": this.$t('search:gray'),
					"4": this.$t('search:red'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"7": this.$t('search:orange'),
					"8": this.$t('search:brown'),
					"9": this.$t('search:green'),
					"10": this.$t('search:purple'),
					"11": this.$t('search:cyan'),
					"12": this.$t('search:pink'),
					"13": this.$t('search:transparent'),
					"14": this.$t('search:gold'),
					"15": this.$t('search:silver'),
					"16": this.$t('search:darkGray')
				}
			return sexEnum[str] || '--'
		},
		nonVehicleCycleCover() {
			const str = this.list.targetFieldMapping?.nonVehicleCycleCover,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:unknown'),
					"1": this.$t('search:no'),
					"2": this.$t('search:yes')
				}
			return sexEnum[str] || '--'
		},
		nonVehicleManned() {
			const str = this.list.targetFieldMapping?.nonVehicleManned,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:noPassenger'),
					"1": this.$t('search:hasPassenger'),
					"2": this.$t('search:unrecognized')
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		// this.form = JSON.parse(option.data)
		this.form = {
			sysCaptureNonvehicleIds: [option.sysCaptureNonvehicleIds],
			targetFields: ['captureDataType', 'captureExtField1', 'captureExtField2', 'captureExtField3',
				'captureExtField4', 'captureExtField5', 'captureNonVehicleInfraredUrl', 'captureNonVehicleUrl',
				'captureReceiveTime', 'captureSeq', 'captureTime', 'captureType', 'createTime',
				'curRecordBodyTotal', 'curRecordFaceTotal', 'curRecordNonVehicleTotal',
				'curRecordVehicleTotal', 'dataSource', 'day', 'devExtField1', 'devExtField2', 'devExtField3',
				'deviceAddress', 'deviceId', 'deviceName', 'deviceType', 'duplicateTag', 'egCaptureId',
				'fromSystem', 'guid', 'hour', 'isLinkage', 'lat', 'lng', 'mon', 'month', 'nonVehicleBoxHeight',
				'nonVehicleBoxWidth', 'nonVehicleBoxX', 'nonVehicleBoxY', 'nonVehicleBrand',
				'nonVehicleBrandScore', 'nonVehicleCaptureClusterStatus', 'nonVehicleCaptureDeleteStatus',
				'nonVehicleCaptureExternalId', 'nonVehicleCaptureTime', 'nonVehicleColor',
				'nonVehicleColorScore', 'nonVehicleConvertible', 'nonVehicleConvertibleScore',
				'nonVehicleFeature', 'nonVehicleFeatureStatus', 'nonVehicleFeatureStatusRemark',
				'nonVehicleFileId', 'nonVehicleHasPlate', 'nonVehicleHasPlateScore', 'nonVehicleHeight',
				'nonVehicleHeightScore', 'nonVehicleIsAltered', 'nonVehicleIsAlteredScore',
				'nonVehicleIsCovered', 'nonVehicleIsCoveredScore', 'nonVehicleIsDecked',
				'nonVehicleIsDeckedScore', 'nonVehicleLength', 'nonVehicleLengthScore', 'nonVehicleLogId',
				'nonVehicleManned', 'nonVehicleMannedScore', 'nonVehicleObjectId', 'nonVehiclePlateBoxHeight',
				'nonVehiclePlateBoxWidth', 'nonVehiclePlateBoxX', 'nonVehiclePlateBoxY',
				'nonVehiclePlateClass', 'nonVehiclePlateClassScore', 'nonVehiclePlateColor',
				'nonVehiclePlateColorScore', 'nonVehiclePlateDescribe', 'nonVehiclePlateDescribeScore',
				'nonVehiclePlateMoveDirection', 'nonVehiclePlateMoveDirectionScore', 'nonVehiclePlateNumber',
				'nonVehiclePlateNumberScore', 'nonVehiclePlateUrl', 'nonVehicleQualityScore',
				'nonVehicleQualityScoreExt', 'nonVehicleReserveInfo', 'nonVehicleTempereture',
				'nonVehicleTemperetureScore', 'nonVehicleTrackId', 'nonVehicleTrackIdBeginTime',
				'nonVehicleType', 'nonVehicleTypeScore', 'nonVehicleWidth', 'nonVehicleWidthScore',
				'panoramaNonVehicleInfraredUrl', 'panoramaNonVehicleUrl', 'remark', 'subDeviceType', 'subType',
				'systemNo', 'targetNonVehicleBoxHeight', 'targetNonVehicleBoxWidth', 'targetNonVehicleBoxX',
				'targetNonVehicleBoxY', 'targetNonVehiclePlateBoxHeight', 'targetNonVehiclePlateBoxWidth',
				'targetNonVehiclePlateBoxX', 'targetNonVehiclePlateBoxY', 'year'
			],
		}
	},
	onShow() {
		this.details()
	},
	methods: {
		searchAgain(src) {
			var obj = {}
			obj.imgUrl = src
			obj.showType = 6
			this.$tab.redirectTo('/pages/search/cljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
		},
		NavClick(index) {
			this.index = index
		},
		details() {
			getsSearchCarS(this.form).then(res => {
				this.list = res.data[0]
			})
		}
	}
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 40rpx 40rpx 10rpx 40rpx;
}

.top .image {
	width: 35%;
}

.image .img {
	width: 235rpx;
	height: 235rpx;
	border-radius: 10rpx;
}

.Proportion_box {
	width: 30%;
	padding: 30rpx 30rpx;
}

.Proportion {
	width: 148rpx;
	height: 148rpx;
	font-size: 40rpx;
	color: #2979ff;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #2979ff;
}

.text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx 30rpx 40rpx;
}

.text .txt {
	width: 35%;
	text-align: center;
	color: #8d8d8d;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.Nav {
	width: 700rpx;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1px solid #f1f1f1;
}

.typeCar {
	padding: 20rpx;
}

.typeCarS {
	padding: 20rpx;
	border-bottom: 1px solid #2979ff;
	color: #2979ff;
}

.bigImg {
	width: 300rpx;
	height: 400rpx;
	margin: 40rpx auto;
}

.bigImg image {
	width: 300rpx;
	height: 400rpx;
}

.details-icon-search {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 1;
	background: url('../../../static/images/icon_search.png');
	background-size: 100% 100%;
}
</style>